<template>
    <section class="embroidery-custom">
        <div class="embroidery-custom-container" :style="{ '--move-count': rate }">
            <div class="embroidery-custom-description">
                <p>Unleash Your Creativity</p>
                <h2>
                    Custom Embroidery 
                </h2>
                <h4>at <button>PODpartner</button></h4>
            </div>
            <div class="embroidery-custom-originality">
                <p></p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
            </div>
            <div class="embroidery-custom-grid"></div>
        </div>
    </section>
</template>
<script>
export default {
    props: {
        rate: {
            type: Number,
            default: 0
        },
    },
    data () {
        return {}
    },
    computed: {},
    methods: {}
}
</script>
<style scoped lang="scss">
.embroidery-custom {
    width: 100%;
    align-items: center;
    justify-content: center;

    .embroidery-custom-container {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--screen-height);

        @keyframes textTrans {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            80% {
                opacity: 1;
            }

            100% {
                transform: scale(0.2);
                opacity: 0;
            }
        }

        & .embroidery-custom-description {
            z-index: 3;
            position: relative;
            text-align: center;
            color: #292929;
            animation-name: textTrans;
            animation-duration: 0s;
            animation-timing-function: ease-in-out;
            animation-delay: 0s;
            animation-iteration-count: var(--move-count);
            animation-fill-mode: forwards;

            p {
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                font-size: 40px;
                color: #160000;
                line-height: 40px;
                margin-bottom: 10px;
            }

            h2 {
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                font-size: 92px;
                color: #292929;
                line-height: 106px;
                margin-bottom: 24px;
            }

            h4 {
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                font-size: 32px;
                color: #160000;
                line-height: 40px;
                margin-bottom: 4px;

                button {
                    width: 180px;
                    height: 44px;
                    background: #292929;
                    border-radius: 12px;
                    color: #fff;
                    font-family: Roboto-Regular, Roboto;
                    font-weight: 400;
                    font-size: 32px;
                    margin-left: 10px;
                    cursor: default;

                }
            }
        }

        & .embroidery-custom-originality {
            z-index: 2;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            translate: all 0.3s;

            @keyframes float {
                0% {
                    transform: translate(-50%, -50%) translateY(0);
                }

                50% {
                    transform: translate(-50%, -50%) translateY(-20px);
                }

                100% {
                    transform: translate(-50%, -50%) translateY(0);
                }
            }

            @keyframes moveToCenter {
                0% {
                    left: var(--startLeft);
                    top: var(--startTop);
                    opacity: 1;
                }

                80% {
                    opacity: 1;
                }

                90% {
                    top: 0;
                }

                100% {
                    left: 0;
                    top: 0;
                    opacity: 0;
                }
            }

            &>p {
                position: absolute;
                border-radius: 50%;
                width: 60px;
                height: 60px;
                will-change: transform;
                transform: translate(-50%, -50%) translateY(0);

                animation-name: float, moveToCenter;
                animation-duration: 5s, 0s;
                animation-timing-function: ease-in-out, ease-in-out;
                animation-delay: 0s, 0s;
                animation-iteration-count: infinite, var(--move-count);
                animation-fill-mode: forwards, forwards;

                &:nth-child(1) {
                    // 64 44 -77
                    --startLeft: 108px;
                    --startTop: -13px;

                    width: 128px;
                    height: 128px;
                    animation-delay: 0s, 0s;
                    background: rgb(201 173 235 / 80%);
                    filter: blur(42px);
                }

                &:nth-child(2) {
                    --startLeft: 160px;
                    --startTop: -174px;

                    width: 48px;
                    height: 48px;
                    animation-delay: 1.5s, 0s;
                    background: #FFCC00;
                    box-shadow: 0px 28px 40px 0px rgba(255, 204, 0, 0.2);
                }

                &:nth-child(3) {
                    --startLeft: 426px;
                    --startTop: -228px;

                    width: 72px;
                    height: 72px;
                    animation-delay: 3s, 0s;
                    background: #B82828;
                    box-shadow: 0px 28px 40px 0px rgba(184, 40, 40, 0.2);
                }

                &:nth-child(4) {
                    --startLeft: 460px;
                    --startTop: 220px;

                    width: 88px;
                    height: 88px;
                    animation-delay: 1.5s, 0s;
                    background: #00A8E0;
                    box-shadow: 0px 28px 40px 0px rgba(0, 168, 224, 0.2);
                }


                &:nth-child(5) {
                    // 30 152 46
                    --startLeft: -182px;
                    --startTop: 76px;
                    width: 60px;
                    height: 60px;
                    animation-delay: 3s, 0s;
                    background: rgb(237 67 140 / 80%);
                    filter: blur(47px);
                }

                &:nth-child(6) {
                    --startLeft: -378px;
                    --startTop: 180px;

                    width: 72px;
                    height: 72px;
                    animation-delay: 1.5s, 0s;
                    background: #78BE3F;
                    box-shadow: 0px 28px 40px 0px rgba(120, 190, 63, 0.2);
                }

                &:nth-child(7) {
                    --startLeft: -460px;
                    --startTop: -212px;

                    width: 88px;
                    height: 88px;
                    animation-delay: 0s, 0s;
                    background: #FA5716;
                    box-shadow: 0px 28px 40px 0px rgba(250, 87, 22, 0.2);
                }
            }
        }

        & .embroidery-custom-grid {
            @keyframes gridTrans {
                0% {
                    opacity: 1;
                }

                80% {
                    opacity: 0.5;
                }

                100% {
                    opacity: 0;
                }
            }

            z-index: 1;
            position: absolute;
            width: 998px;
            height: 338px;
            background-image: linear-gradient(to right, #E9F0EE 1px, transparent 1px),
            linear-gradient(to bottom, #E9F0EE 1px, transparent 1px);
            background-size: 40px 40px;
            background-position: center center;
            animation-name: gridTrans;
            animation-duration: 0s;
            animation-timing-function: ease-in-out;
            animation-delay: 0s;
            animation-iteration-count: var(--move-count);
            animation-fill-mode: forwards;
        }

    }
}

.embroidery-custom.animation-none {
    min-height: auto;

    .embroidery-custom-container {
        --move-count: 0 !important;
        position: relative;
        width: 100%;
        height: 564px;
        transform: scale(0.8);

        h2 {
            white-space: nowrap
        }
    }
}

@media screen and (max-width: 840px) {
    .embroidery-custom {
        height: 400px !important;
    }

    .embroidery-custom-container {
        transform: scale(0.6) !important;
        --move-count: 0.2 !important;
    }
}

@media screen and (max-width: 540px) {
    .embroidery-custom-container {
        transform: scale(0.35) !important;
        --move-count: 0.2 !important;
    }
}
</style>